<template>
  <div>
    <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
      :close-on-press-escape="false" width="60%" top="70px">
      <div class="dialogInner">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
          :label-width="$i18n.locale === 'en-US' ? '140px' : '140px'">
          <el-row>
            <el-col :span="12">
              <el-form-item label="商户名称" prop="name">
                <el-input v-model="dataForm.name"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
                        <el-form-item label="企业编码" prop="code">
                            <el-input v-model="dataForm.code"></el-input>
                        </el-form-item>
                    </el-col> -->
            <el-col :span="12">
              <el-form-item label="企业法人" prop="legalPerson">
                <el-input v-model="dataForm.legalPerson"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法人身份证号" prop="operatorCard">
                <el-input v-model="dataForm.operatorCard"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
                        <el-form-item label="实际经营人类型" prop="operatorType">
                            <ren-select v-model="dataForm.operatorType" dict-type="hotel_operator_type" placeholder="请选择" style="width:100%"></ren-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="实际经营人姓名" prop="operatorName">
                            <el-input v-model="dataForm.operatorName"></el-input>
                        </el-form-item>
                    </el-col> -->
            <el-col :span="12">
              <el-form-item label="企业名称" prop="operateProject">
                <el-input v-model="dataForm.operateProject"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="统一社会信用代码" prop="creditCode">
                <el-input v-model="dataForm.creditCode"></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
                        <el-form-item label="经营人证件类型" prop="operatorCardType">
                            <ren-select v-model="dataForm.operatorCardType" dict-type="hotel_operator_type" placeholder="请选择" style="width:100%"></ren-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="派出所代码" prop="policeCode">
                            <el-input v-model="dataForm.policeCode"></el-input>
                        </el-form-item>
                    </el-col> -->
            <!-- <el-col :span="12">
                        <el-form-item label="产权人类型" prop="ownerType">
                            <ren-select v-model="dataForm.ownerType" dict-type="hotel_owner_type" placeholder="请选择" style="width:100%"></ren-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="经营人证件号" prop="operatorCard">
                            <el-input v-model="dataForm.operatorCard"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="注册登记号" prop="registerNo">
                            <el-input v-model="dataForm.registerNo"></el-input>
                        </el-form-item>
                    </el-col> -->
            <el-col :span="12">
              <el-form-item label="所属区域" prop="islandId">
                <el-select v-model="dataForm.islandId" placeholder="所属区域" clearable style="width: 100%">
                  <el-option v-for="item in islandArr" :key="item.id" :label="item.scenicName" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经纬度" prop="lonandLat">
                <el-input v-model="dataForm.lonandLat" style="width: 60%; margin-right: 10px"></el-input>
                <el-button type="primary" size="mini" @click="mapCli()">地图选点</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="酒店类别" prop="category">
                <ren-select v-model="dataForm.category" dict-type="HotelCategory" placeholder="请选择"
                  style="width: 100%"></ren-select>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="12">
                        <el-form-item label="经营项目" prop="operateProject">
                            <el-input v-model="dataForm.operateProject"></el-input>
                        </el-form-item>
                    </el-col> -->


            <el-col :span="12">
              <el-form-item label="开业时间" prop="operateTime">
                <el-date-picker v-model="dataForm.operateTime" value-format="yyyy-MM-dd" type="date" style="width: 100%"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="地址" prop="">
                <el-select v-model="dataForm.province" placeholder="省编码" clearable style="width: 15%" @change="(val) => {
                  regionChange(val, 'province');
                }
                  ">
                  <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-model="dataForm.city" placeholder="市" clearable style="width: 15%; margin: 0 1%" @change="(val) => {
                  regionChange(val, 'city');
                }
                  ">
                  <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-select v-model="dataForm.area" placeholder="区" style="width: 15%; margin: 0 1%" clearable @change="(val) => {
                  regionChange(val, 'area');
                }
                  ">
                  <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <el-input v-model="dataForm.street" placeholder="街道" style="width: 15%; margin: 0 1%">
                </el-input>
                <el-input v-model="dataForm.areaDetail" placeholder="请输入详细地址" style="width: 34%"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否自动退房" prop="isCheckOut">
                <el-switch :active-value="1" :inactive-value="0" v-model="dataForm.isCheckOut" active-text="开"
                  inactive-text="关">
                </el-switch>
              </el-form-item>
            </el-col>

            <el-col :span="6">
              <el-form-item label="是否需要身份证" prop="isNeedCard">
                <el-switch :active-value="1" :inactive-value="0" v-model="dataForm.isNeedCard" active-text="开"
                  inactive-text="关">
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="是否需要结算" prop="isSettlement">
                <el-switch :active-value="1" :inactive-value="0" v-model="dataForm.isSettlement" active-text="开"
                  inactive-text="关">
                </el-switch>
              </el-form-item>
            </el-col>

            <el-col :span="9" v-if="dataForm.isCheckOut == 1">
              <el-form-item label="自动退房时间" prop="checkOutTime">
                <el-time-picker v-model="dataForm.checkOutTime" value-format="hh:MM:ss" placeholder="自动退房时间">
                </el-time-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排行榜" prop="rankTop">
                <el-input v-model="dataForm.rankTop" placeholder="排行榜"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="上榜理由" prop="rankRemark">
                <el-input v-model="dataForm.rankRemark" placeholder="上榜理由" type="textarea" :rows="2"></el-input>
              </el-form-item>
            </el-col>
            <h3>联系人信息</h3>
            <el-col :span="12">
              <el-form-item label="联系人姓名" prop="linkName">
                <el-input v-model="dataForm.linkName" :disabled='dataForm.id?true:false'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人号码" prop="linkPhone">
                <el-input v-model="dataForm.linkPhone" :disabled='dataForm.id?true:false'></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="管理员用户名" prop="adminName">
                <el-input v-model="dataForm.adminName" :disabled='dataForm.id?true:false'></el-input>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="管理员密码" prop="adminPassword">
                <el-input type="password" v-model="dataForm.adminPassword"  :disabled='dataForm.id?true:false'></el-input>
              </el-form-item>
            </el-col>
            <h3>资料上传</h3>
            <el-col :span="8">
              <el-form-item label="营业执照" prop="img0">
                <el-upload class="avatar-uploader" :action="url" :show-file-list="false"
                  :on-success="(res, file) => handleAvatarSuccess(res, 'img0')"
                  :before-upload="(file) => beforeAvatarUpload(file, 'img0')">
                  <img v-if="dataForm.img0" :src="dataForm.img0" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="法人身份证(国徽面)" prop="img1">
                <!-- :on-success="(res, file) => handleAvatarSuccess(res, file, 1)"  -->
                <el-upload class="avatar-uploader" :action="url" :show-file-list="false"
                  :on-success="(res, file) => handleAvatarSuccess(res, 'img1')"
                  :before-upload="(file) => beforeAvatarUpload(file, 'img1')">
                  <img v-if="dataForm.img1" :src="dataForm.img1" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="法人身份证(人像面)" prop="img2">
                <el-upload class="avatar-uploader" :action="url" :show-file-list="false"
                  :on-success="(res, file) => handleAvatarSuccess(res, 'img2')"
                  :before-upload="(file) => beforeAvatarUpload(file, 'img2')">
                  <img v-if="dataForm.img2" :src="dataForm.img2" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="店铺门头/公司照片" prop="img3">
                <el-upload class="avatar-uploader" :action="url" :show-file-list="false"
                  :on-success="(res, file) => handleAvatarSuccess(res, 'img3')"
                  :before-upload="(file) => beforeAvatarUpload(file, 'img3')">
                  <img v-if="dataForm.img3" :src="dataForm.img3" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="其他相关证件" prop="img4">
                <el-upload class="avatar-uploader" :action="url" :show-file-list="false"
                  :on-success="(res, file) => handleAvatarSuccess(res, 'img4')"
                  :before-upload="(file) => beforeAvatarUpload(file, 'img4')">
                  <img v-if="dataForm.img4" :src="dataForm.img4" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <div style="margin: 0 -10px">
            <h3>审核记录</h3>
          </div>
          <el-table :data="dataForm.homestayCheckList" style="width: 100%';padding:0 20px">
            <el-table-column prop="checkTime" label="审核时间" width="180">
            </el-table-column>
            <el-table-column prop="checkPerson" label="审核人" width="180">
            </el-table-column>
            <el-table-column prop="checkFeedback" label="审核反馈">
            </el-table-column>
            <el-table-column prop="result" label="审核结果">
              <template slot-scope="scope">
                {{ scope.row.result == 1 ? "通过" : "不通过" }}
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
      <template slot="footer">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
          $t("confirm")
        }}</el-button>
      </template>
    </el-dialog>
    <el-dialog :visible.sync="mapShow" title="地图选点" top="70px">
      <mapdiv ref="mapDiv" style="width: 96%, margin: 0 auto 20px" :longitude="dataForm.lon" :latitude="dataForm.lat"
        @getPos="getPosVal($event)">
      </mapdiv>
    </el-dialog>
    <!-- 裁剪框 -->
    <cropper-dlg v-if="showCropper" :dialogVisible.sync="showCropper" :img-file="currentFile" ref="vueCropper"
      @upload="cropperUpload"></cropper-dlg>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import mixinRegionModule from "@/mixins/region-module";
import debounce from "lodash/debounce";
import mapdiv from "../data/map-data/map2";
export default {
  mixins: [mixinRegionModule],
  data() {
    return {
      mapShow: false,
      visible: false,
      url: `${window.SITE_CONFIG["apiURL"]
        }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
      dataForm: {
        homestayCheckList: [],
        id: "",
        name: "",
        operatorName: "",
        operatorType: "",
        legalPerson: "",
        code: "",
        policeCode: "",
        operatorCardType: "",
        creditCode: "",
        operatorUnit: "",
        operateTime: "",
        operateProject: "",
        registerNo: "",
        operatorCard: "",
        ownerType: "",
        areaDetail: "",
        street: "",
        area: "",
        city: "",
        province: "",
        checkOutTime: "",
        isSettlement: 0,
        isNeedCard: 0,
        isCheckOut: 0,
        adminPassword: "",
        adminName: "",
        linkPhone: "",
        linkName: "",
        category: "",
        picList: [],
        img0: "",
        img1: "",
        img2: "",
        img3: "",
        islandId: "",
        lonandLat: "",
        lat: "",
        lon: "",
        rankTop: "",
        rankRemark: ""
      },

      islandArr: [], //岛屿
      cardType: ["身份证", "护照"],
      hotelType: [
        {
          val: 1,
          name: "酒店",
        },
        {
          val: 2,
          name: "高端民宿",
        },
        {
          val: 3,
          name: "中端民宿",
        },
        {
          val: 4,
          name: "其他民宿",
        },
      ],
      types: [4, 1, 2, 5, 0],
      tempLegalPerson: "",
      tempIdCard: "",
      tempLinkName: "",
      tempAdminPassword: "",
      tempPhone: "",
      currentFile: "",
      cropperIndex: null,
      showCropper: false, //裁剪弹框
      isCropper: true, //上传之前是否显示裁剪
    };
  },
  components: {
    mapdiv,
  },
  computed: {
    dataRule() {
      return {
        rankTop: [
          { required: false, message: "请输入正确数值", pattern: /^[0-9][0-9]*$/, trigger: 'blur' }
        ],
        lonandLat: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        legalPerson: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        operatorCard: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        category: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        operateProject: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        creditCode: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        islandId: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        operatorCardType: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        registerNo: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        adminPassword: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        adminName: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        linkPhone: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
        linkName: [
          {
            required: true,
            message: this.$t("validate.required"),
            trigger: "blur",
          },
        ],
      };
    },
  },
  methods: {
    mapCli() {
      this.mapShow = true;
      this.$nextTick(() => {
        this.$refs.mapDiv.initMap();
      });
    },
    getPosVal(obj) {
      this.mapShow = false;
      this.dataForm.lat = obj.lat;
      this.dataForm.lon = obj.lon;
      this.dataForm.lonandLat = obj.lon + "," + obj.lat;
    },
    // handleAvatarSuccess(res, file, index) {
    //   let key = "img" + index;
    //   this.dataForm[key] = res.data.url;
    // },
    handleAvatarSuccess(res, file, key) {
      this.dataForm[key] = res.data.url;
    },
    beforeAvatarUpload(file, name) {
      if (
        file.type !== "image/jpg" &&
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/gif"
      ) {
        this.$message.error(
          this.$t("upload.tip", {
            format: "jpg、png、gif",
          })
        );
        return false;
      }
      if (this.isCropper) {
        //显示裁剪
        this.currentFile = file;
        this.cropperIndex = name;
        this.showCropper = true;
        this.$nextTick(() => {
          this.$refs.vueCropper.init();
        });
        return false;
      }
    },
    cropperUpload(data) {
      this.showCropper = false;
      if (data != "close") {
        //裁剪成功后获取的图片
        this.$http.post("/oss/file/aliyunUpload", data).then((res) => {
          if (res.data.code == 0) {
            this.handleAvatarSuccess(res.data, "", this.cropperIndex);
          }
        });
      }
    },
    init() {
      this.visible = true;
      this.getIsland();
      this.provincAreaDetailInfoList();
      this.$nextTick(() => {
        this.dataForm.lat = "";
        this.dataForm.lon = "";
        this.dataForm.province = "";
        this.dataForm.city = "";
        this.dataForm.area = "";
        this.dataForm.street = "";
        this.dataForm.areaDetail = "";
        this.dataForm.homestayCheckList = [];
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        }
      });
    },
    getIsland() {
      this.$http.get("/hotel/common/selectScenicList").then((res) => {
        if (res.data.code == 0) {
          this.islandArr = res.data.data;
        }
      });
    },
    // 获取信息
    getInfo() {
      this.$http
        .get("/hotel/homestay/" + this.dataForm.id)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };

          this.dataForm.category = this.dataForm.category
            ? this.dataForm.category
            : "";

          if (this.dataForm.lon && this.dataForm.lat) {
            this.dataForm.lonandLat =
              this.dataForm.lon + "," + this.dataForm.lat;
          }

          this.dataForm.picList = this.dataForm.picList
            ? this.dataForm.picList
            : [];
          console.log(this.dataForm.picList);
          if (this.dataForm.picList) {
            for (let i = 0; i < this.dataForm.picList.length; i++) {
              if (this.dataForm.picList[i].type == 4) {
                this.dataForm.img0 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 1) {
                this.dataForm.img1 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 2) {
                this.dataForm.img2 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 5) {
                this.dataForm.img3 = this.dataForm.picList[i].pic;
              }
              if (this.dataForm.picList[i].type == 0) {
                this.dataForm.img4 = this.dataForm.picList[i].pic;
              }
            }
          }
          //null 值转空
          for (let k in this.dataForm) {
            if (this.dataForm[k] == null) {
              this.dataForm[k] = "";
            }
          }

          // 省市区数据
          if (this.dataForm.city) {
            this.cityAreaDetailInfoList(this.dataForm.province);
          }
          if (this.dataForm.area) {
            this.countyAreaDetailInfoList(this.dataForm.city);
          }
          this.tempLegalPerson = this.dataForm.legalPerson;
          this.tempIdCard = this.dataForm.operatorCard;
          this.tempLinkName = this.dataForm.linkName;
          this.tempPhone = this.dataForm.linkPhone;
          this.tempAdminPassword = this.dataForm.adminPassword;
        })
        .catch(() => { });
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          //加密
          let newDataForm = Object.assign({}, this.dataForm);
          if (
            newDataForm.legalPerson &&
            this.tempLegalPerson != newDataForm.legalPerson
          ) {
            //编辑了
            newDataForm.legalPerson = this.$CryptoJS.encrypt(
              newDataForm.legalPerson
            );
          } else {
            newDataForm.legalPerson = null;
          }
          if (
            newDataForm.operatorCard &&
            this.tempIdCard != newDataForm.operatorCard
          ) {
            newDataForm.operatorCard = this.$CryptoJS.encrypt(
              newDataForm.operatorCard
            );
          } else {
            newDataForm.operatorCard = null;
          }
          if (
            newDataForm.linkName &&
            this.tempLinkName != newDataForm.linkName
          ) {
            newDataForm.linkName = this.$CryptoJS.encrypt(newDataForm.linkName);
          } else {
            newDataForm.linkName = null;
          }
          if (
            newDataForm.linkPhone &&
            this.tempPhone != newDataForm.linkPhone
          ) {
            newDataForm.linkPhone = this.$CryptoJS.encrypt(
              newDataForm.linkPhone
            );
          } else {
            newDataForm.linkPhone = null;
          }
          if (
            newDataForm.adminPassword &&
            this.tempAdminPassword != newDataForm.adminPassword
          ) {
            newDataForm.adminPassword = this.$CryptoJS.encrypt(
              newDataForm.adminPassword
            );
          } else {
            newDataForm.adminPassword = null;
          }
          newDataForm.picList = [];
          for (let i = 0; i < 5; i++) {
            let key = "img" + i;
            if (newDataForm[key] != "") {
              newDataForm.picList.push({
                hotelHomestayId: newDataForm.id,
                id: "",
                pic: newDataForm[key],
                type: this.types[i],
              });
            }
          }
          this.$http[!newDataForm.id ? "post" : "put"](
            "/hotel/homestay",
            newDataForm
          )
            .then(({ data: res }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => { });
        });
      },
      1000,
      {
        leading: true,
        trailing: false,
      }
    ),
  },
};
</script>

<style lang="scss" scoped>
.avatar-uploader {
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    .el-upload:hover {
      border-color: #409eff;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 158px;
    height: 158px;
    line-height: 158px;
    text-align: center;
  }

  .avatar {
    width: 158px;
    height: 158px;
    display: block;
  }
}

h3 {
  padding: 30px 0 15px;
  width: 94%;
  margin: 0 auto 30px;
  border-bottom: 1px solid #ddd;
  color: #303133;
  font-size: 16px;
  overflow: hidden;
}
</style>
